<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>证书设置</title>
  <script src="../js/vue/vue.js"></script>

  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  <link rel="stylesheet" href="../js/elementui/index.css">
  <script src="../js/elementui/index.js"></script>
  <script src="../js/theme/FileSaver.js"></script>
  <script src="/js/theme/pptx/libs/jquery.min.js"></script>
  <script src="/js/common.js?t=20250804"></script>
  <link rel="stylesheet" href="../css/common.css">

  <link rel="stylesheet" href="/js/layer/layer.css" type="text/css">
  <script src="/js/layer/layer.js"></script>

  <script src="/js/vue/upload-button.js"></script>
  <style>
    /*.col-tree,.col-tree + .el-col {*/
    /*  transition:0.2s ;*/
    /*}*/
    /*.col-tree:hover{*/
    /*  width: 25% !important;*/
    /*}*/
    /*.col-tree:hover + .el-col{*/
    /*  width:75% !important;*/
    /*}*/
    .cert-text {
      padding-top: 5px;
      margin-bottom: 8px !important;
    }

    .step-box {
      line-height: 30px;
      height: 30px;
    }

    .cert-text .el-col {
      margin-right: 5px;
    }

    .cert-text-del {
      float: left;
      margin-left: -100px;
      line-height: 50px;
    }

    .cert-text-text {
      line-height: 20px;
      text-align: left;
    }

    .cert-text-show {
      transition: .3s;
      /*text-align: center;*/
      min-height: 60px;
      /*line-height: 60px;*/
      border-bottom: 1px solid #d8d7d7;
      border-top: 1px solid white;
      /*margin-bottom: 15px;*/
    }

    .cert-text-show:hover {
      border-bottom: 1px solid gray;
      border-top: 1px solid gray;
      cursor: pointer;
      background-color: aliceblue
    }

    .cert-text-list input {
      padding: 0px 5px;
    }

    .cert-text-text-span span {
      margin-right: 6px;
      padding: 0px 5px;
      background-color: #d7ecd0;
    }
  </style>
</head>

<body>
<div id="app">
  <div class="cert-editor" style="padding: 20px;min-width: 1500px;">
    <el-row>
      <el-col class="col-tree" :span="4">
        <div style="border: 1px solid gray;padding: 10px;margin-top:50px;min-height: 600px;">
          <el-tree ref="tree" :data="certList" node-key="id" :props="defaultProps" highlight-current="true"
                   default-expanded-keys="['usad','usap']"
                   @node-click="handleNodeClick">
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                             <i :class="data.level == 1 ? 'el-icon-folder':'el-icon-document'"></i>
                             <span>{{ node.label }}</span>
                        </span>
          </el-tree>
        </div>
      </el-col>
      <el-col :span="20">
        <div style="margin-left:2%;" v-show="!form.id">
          <div class="edit-menu">
            <el-button class="el-button" type="primary" plain @click="newForm">添加</el-button>
          </div>
        </div>

        <div style="margin-left:2%;"  v-show="form.id">
          <div class="edit-menu">
            <el-button class="el-button" type="primary" plain @click="newForm">添加</el-button>
            <el-button class="el-button" type="success" plain @click="copyForm">复制</el-button>
            <a class="el-button" style="margin-left: 120px;" @click="testForm" :href="'cert_demo.html?id='+form.id"
            target="demo">demo测试</a>
            <el-button class="el-button" type="danger" style="float:right;margin-right:20px;" @click="deleteForm">删除</el-button>
          </div>
          <div class="edit-form" style="padding: 20px;margin-top:10px;">
            <el-form ref="form" :model="form" label-width="130px" size="mini">
              <el-row>
                <el-col :span="6">
                  <el-form-item label="数据类型">
                    <el-select v-model="form.type" placeholder="请选择" style="width:100%">
                      <el-option value="usad">usad</el-option>
                      <el-option value="usap">usap</el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="18">
                  <el-form-item label-width="5px">
                    <el-select v-model="certTypeIds" placeholder="请选择" multiple style="width:100%">
                      <el-option v-for="item in certTypeListCur"
                                 :key="item.id"
                                 :label="item.type+'-'+item.name"
                                 :value="item.id">
                      </el-option>

                    </el-select>
                  </el-form-item>
                </el-col>

              </el-row>
              <el-row>
                <el-col :span="22">
                  <el-form-item label="证书名称" prop="name">
                    <el-input v-model="form.name"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <el-form-item label-width="10px">
                    <el-checkbox v-model="area2">区域</el-checkbox>
                  </el-form-item>
                </el-col>

              </el-row>
              <el-row>
                <el-col :span="14">
                  <el-form-item label="底图">
                    <z-upload-button label="上传" :value="form.pic" :base64="true"
                                     @change="upload"></z-upload-button>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-col :span="16">
                    <el-form-item label="尺寸(高/宽px)" prop="width">
                      <el-input v-model="form.width" placeholder="宽度(pt)"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item prop="height" label-width="10px">
                      <el-input v-model="form.height" placeholder="高度(pt)"></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>

                <el-col :span="2">
                  <el-form-item label-width="10px">
                    <el-checkbox v-model="default2">默认</el-checkbox>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item>
                <div class="step-box">
                  <el-row class="cert-text">
                    <el-col :span="2">left</el-col>
                    <el-col :span="2">top</el-col>
                    <el-col :span="5">font</el-col>
                    <el-col :span="2">size</el-col>
                    <el-col :span="2">color</el-col>
                    <el-col :span="2">char space</el-col>
                    <el-col :span="2">line height</el-col>
                    <el-col :span="2">max width</el-col>
                    <el-col :span="2">align</el-col>
                  </el-row>
                </div>

                <el-row class="cert-text-list">
                  <el-form-item label-width="0px" size="mini" class="cert-text" style="min-height: 80px;"
                                v-for="(item,index) in form.items" :key="item.id">
                    <div>
                      <el-row>
                        <div class="cert-text-del">
                          <el-button icon="el-icon-document-copy" circle="true" size="mini"
                                     @click="copyCertText(item)"></el-button>
                          <el-button type="danger" icon="el-icon-delete" circle
                                     size="mini" @click="deleteCertText(index,item)"></el-button>
                        </div>
                        <div v-show="item.id == current.editId" style="position: relative;">
                          <div>
                            <el-input v-model="item.text" placeholder="text"></el-input>
                          </div>
                          <div style="margin-top: 2px;">
                            <el-col :span="2">
                              <el-input v-model="item.x" placeholder="x"></el-input>
                            </el-col>
                            <el-col :span="2">
                              <el-input v-model="item.y" placeholder="y"></el-input>
                            </el-col>
                            <el-col :span="5">
                              <el-select v-model="item.font" clearable placeholder="font" style="width:100%;">
                                <el-option v-for="font in fontList" :key="font.name" :label="font.name"
                                           :value="font.name"></el-option>
                              </el-select>
                            </el-col>
                            <el-col :span="2">
                              <el-input v-model="item.fontSize" placeholder="size"></el-input>
                            </el-col>
                            <el-col :span="2">
                              <el-input v-model="item.color" placeholder="color"></el-input>
                            </el-col>
                            <el-col :span="2">
                              <el-input v-model="item.options.charSpace" placeholder="char space"></el-input>
                            </el-col>
                            <el-col :span="2">
                              <el-input v-model="item.options.lineHeightFactor" placeholder="line height"></el-input>
                            </el-col>
                            <el-col :span="2">
                              <el-input v-model="item.options.maxWidth" placeholder="max width"></el-input>
                            </el-col>
                            <el-col :span="2">
                              <el-select v-model="item.options.align" clearable placeholder="align">
                                <el-option v-for="font in alignList" :key="font.code" :label="font.code"
                                           :value="font.code"></el-option>
                              </el-select>
                            </el-col>
                            <el-col :span="1">
                              <el-button type="success" icon="el-icon-check" circle size="mini"
                                         @click="closeEditor"></el-button>
                            </el-col>
                          </div>

                        </div>
                        <el-row v-show="item.id != current.editId" class="cert-text-show"
                                @click.native="editCertText(item)">
                          <div>
                            <span>
                              <span class="cert-text-text-span" v-html="genText(item.text)"></span>
                            </span>
                          </div>
                          <div style="margin-top: 2px;">
                            <el-col :span="2">{{item.x||"-"}}</el-col>
                            <el-col :span="2">{{item.y}}</el-col>
                            <el-col :span="5">{{item.font}}</el-col>
                            <el-col :span="2">{{item.fontSize||"-"}}</el-col>
                            <el-col :span="2">{{item.color||"-"}}</el-col>
                            <el-col :span="2">{{item.options.charSpace||"-"}}</el-col>
                            <el-col :span="2">{{item.options.lineHeightFactor||"-"}}</el-col>
                            <el-col :span="2">{{item.options.maxWidth||"-"}}</el-col>
                            <el-col :span="2">{{item.options.align||"-"}}</el-col>
                          </div>
                        </el-row>

                      </el-row>
                    </div>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-button plain icon="el-icon-plus" size="mini" @click="addCertText">
                  </el-button>
                </el-row>
              </el-form-item>

              <el-form-item style="text-align: center;padding-right: 50px;margin-top: 10px;">
                <el-button class="el-button--primary" @click="save">保存</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div style="margin-left:2%;padding: 10px; margin-top: 20px;" class="edit-form">
          <p>变量说明</p>
          <div style="padding: 20px;">
            {"Award":"奖项","Ranking":"等级","TeamNumber":"团队编号","TeamName":"团队编号","TeamName":"团队名称","Name":"授权对象","StudentNumber":"学生编号"
            ,"Division":"区域","HSV":"HSV","TestName":"学科","Score":"分数"}
          </div>
        </div>
      </el-col>
    </el-row>

  </div>

</div>
<script>
  new Vue({
    el: '#app',
    data: {
      current: {
        editId: "1",
        node: null
      },
      certTypeListCur: [],
      fontList: [],
      certTypeGroup: [{"code": "usad"}, {"code": "usap"}],
      alignList: [{"code": "left"}, {"code": "center"}, {"code": "right"}, {"code": "justify"}],
      certTypeList: [],

      certList: [
        {"id": "usad", name: "usad", certs: [], types: [], level: 1}, {
          "id": "usap",
          name: "usap",
          certs: [],
          types: [],
          level: 1
        }
      ],
      defaultProps: {"label": "name", "children": "certs"},
      form: {certTypeIds: "[]"}
    },

    watch: {
      "form.type": function (val) {
        this.certTypeListCur = this.certTypeList.filter(item => item.type == val)
      }
    },
    computed: {
      certTypeIds: {
        set: function (val) {
          this.form.certTypeIds = JSON.stringify(val);
          // if ((!this.form.name) && val.length> 0){
          //   let find = this.certTypeList.find(val[0]);
          //   if (find) {this.form.name = find.name;}
          // }
        },
        get: function () {
          return JSON.parse(this.form.certTypeIds);
        }

      },
      "default2": {
        get: function () {
          return this.form.defaultCert == 1;
        },
        set: function (val) {
          this.form.defaultCert = val ? 1 : 0;
        }
      },
      "area2": {
        get: function () {
          return this.form.area == 1;
        },
        set: function (val) {
          this.form.area = val ? 1 : 0;
        }
      }

    },
    created: function () {
      $$.listBy("cert_type", "name", (list) => {
        this.certTypeList = list;
        this.certList.forEach(g => {
          list.forEach(item => {
            if (item.type == g.id) {
              g.types.push(item.id)
            }
          })
        });
        this.getList();
      });
      $$.list("font", (list) => {
        this.fontList.push(...list);

      });

    },
    methods: {
      getList() {
        $$.listBy("cert", "type,area,name,defaultCert desc ", (list) => {
          list = list.map(item => {
            item.level = 2;
            return item;
          });

          this.certList.forEach(g => {
            list.forEach(item => {
              if (g.name == item.type) {
                g["certs"].push(item);
                item.parent = g;
              }
            });
          });
          // this.certList = list;
        })
      },
      handleNodeClick(data) {
        if (data.level != 2) {
          this.current.node = data;
          this.newForm();
          return;
        }
        this.current.node = data;
        if (!data.form) {
          $$.fetch("cert", data.id, (cert) => {
            data.form = JSON.stringify(cert);
            this.form = cert;
          })
        } else {
          this.form = JSON.parse(data.form);
        }

      },
      upload(e) {
        let _this = this;
        $$.upload("cert",{name:this.form.type+"/"+e.name,data:e.data},(path)=>{
          _this.form.pic = path;
        });
      },
      cancel() {
        this.$refs["form"].resetFields()
      },
      save(e) {
        this.form.items.forEach(item => {
          if (item.options.lineHeightFactor) {
            item.options.lineHeightFactor = Number.parseFloat(item.options.lineHeightFactor)
          }
        });
        let f = JSON.stringify(this.form);
        $$.save("cert", this.form, (cert) => {
          // this.form = cert;
          let newNode = JSON.parse(f);
          if (!this.current.node) {
            this.current.node = newNode;
            this.current.node.level = 2;
            let find2 = this.certList.find(item => item.id == this.form.type);

            this.$refs["tree"].append(this.current.node, find2)
          } else {
            this.current.node.name = this.form.name;
          }
          this.current.node.form = f;
          layer.msg("保存成功!")
        }, (r) => {
          layer.msg(r.msg || "保存失败！")
        })
      },
      newForm(e) {
        $$.uuid((id) => {
          this.form = {
            "type": "usad",
            "id": id,
            "pic": "",
            certTypeIds: "[]",
            "items": [{id: id, options: {}}],
            "name": "",
            "defaultCert": 0,
            "area":0
          };
          this.current.editId = id;
          this.current.node = null;
        })

      },
      copyForm() {
        let dNode = this.current.node;
        if (dNode && dNode.level == 2) {
          $$.uuid((id) => {
            this.form = JSON.parse(dNode.form);
            this.form.id = id;
            this.form.name = "";// this.form.name + " copy";
            this.form.items.forEach(item => {
              $$.uuid(itemId => item.id = itemId)
            });
            this.current.node = null;
          })
        }
      },
      deleteForm() {

        let dNode = this.current.node;
        if (dNode && dNode.level == 2) {
          let cc = layer.confirm(`是否确定删除[${dNode.name}]?`, () => {
            $$.delete("cert", dNode.id, () => {
              this.$refs.tree.remove(dNode);
              // let index = dNode.parent.certs.findIndex(d => d.id === dNode.id);
              // dNode.parent.certs.splice(index,1);
              this.newForm()
              layer.msg("删除成功!")
            }, (r) => {
              layer.msg(r.msg || "删除失败！");
            })

          });

        }
      },
      addCertText() {
        $$.uuid((id) => {
          this.form.items.push({"id": id, options: {}})
          this.current.editId = id;
        })

      },
      deleteCertText(i) {
        this.form.items.splice(i, 1);
        // delete item
        this.current.editId = "";
      },
      copyCertText(item) {
        $$.uuid((id) => {
          let newCT = {}
          Object.assign(newCT, item);
          newCT["id"] = id;
          this.form.items.push(newCT)
        });
      },
      editCertText(item) {
        this.current.editId = item.id;
      },
      closeEditor() {
        this.current.editId = "0";
      },
      genText(txt) {
        if (/^\[(.*?)\]$/.test(txt)) {
          try {
            let list = JSON.parse(txt);
            let r = "";
            list.forEach(item => {
              r += `<span>${item}</span>`
            })
            return r;
          } catch (e) {
          }
        }
        return `<span>${txt}</span>`;
      },
      testForm() {
        DataUtils.set("certId", this.form.id);

      }
    }
  })
</script>
</body>

</html>